<template>
	<view class="postItem" @click="toDetail(props.id)">
		<image class="waterMark" src="@/static/imgs/jyuLogo2.png" />
		<image class="waterMark" mode="aspectFill" style="
	  height: 400rpx;
	  width: 600rpx;
	  left: 0rpx;
	  top: 0rpx;
	  -webkit-clip-path: polygon(0 0, 0 47%, 100% 0);
	  clip-path: polygon(0 0, 0 100%, 100% 0);
	" src="@/static/imgs/pattern6.svg" />
		<view class="header">
			<!-- <image src="@/static/imgs/smile.png" class="avater" mode="aspectFill"></image> -->
			<image :src="props.avatarUrl" class="avater" mode="aspectFill"></image>
			<view style="margin-top: 10rpx;">
				<view class="userName">
					{{ props.username }}
					<text class="clubName" v-if="props.type === '社团活动' && props.clubName">
						({{ props.clubName }})
					</text>
				</view>
				<view style="display: flex;align-items: center;height: 50rpx;">
					<view style="font-size: 25rpx; color: #c2c5cd;margin-right: 20rpx;">{{ props.date }}</view>
					<view class="bthDelete" v-if="props.ifMine" @tap.stop="handleDelete"
						style="width:50rpx;height: 50rpx;z-index: 20;"><van-icon name="delete" color="#373737" /></view>
				</view>
			</view>
			<view class="audit" v-if="props.ifMine">
				<Tag v-if="props.statu==0&&props.type!=='社团活动'" type="warn" tag="审核中" />
				<Tag v-if="props.statu==0&&props.type==='社团活动'" type="warn" tag="教师审核中" />
				<Tag v-if="props.statu==3&&props.type==='社团活动'" type="warn" tag="管理员审核中" />
				<Tag v-if="props.statu==1" type="normal" tag="已通过" />
				<Tag v-if="props.statu==2" type="danger" tag="不通过" />
				<!-- 审核中、不通过 -->
			</view>
			<view class="audit" v-if="props.ifAudit || props.ifTeacher">
				<view class="btn access" @tap.stop="accessPost">
					<van-icon name="success" color="#76c84e" />
				</view>
				<view class="btn disagree" @tap.stop="disagreePost">
					<van-icon name="cross" color="red" />
				</view>
			</view>
		</view>
		<view class="body" v-if="(props.type==='公告'||props.type==='社团活动')&&!props.ifDetail">
			<view class="bodyContextIn">
				<Tag :tag="props.type" type="normal" />
				<view class="conText" style="margin-left: 10rpx;display: inline;font-size: 40rpx;font-weight: 900;"
					v-html="props.title">
				</view>
			</view>
		</view>
		<view class="body" v-else>
			<view class="bodyContextIn" v-if="props.type==='公告'||props.type==='社团活动'">
				<Tag :tag="props.type" type="normal" />
				<view class="title" style="margin-left: 10rpx;display: inline;font-size: 40rpx;font-weight: 900;"
					v-html="props.title">
				</view>
			</view>
			<view :style="`white-space: pre-line;height:${contentDomHeight}rpx`" class="conText"
				:class="{content:!isShowALL&&needShowMore}" v-html="props.content">
				<!-- {{ props.content }} -->
			</view>
			<button class="bthShowMore" @tap.stop="handleShowALL" v-if="needShowMore">{{isShowALL?'合起':'展开全部'}}
				<van-icon name="arrow-down" v-if="!isShowALL" /><van-icon name="arrow-up" v-else />
			</button>
			<view class="imgsCon">
				<image v-for="(item,index) in props.imgUrls" :key="index" class="imgItem" :src="item" mode="aspectFill"
					@click="previewImage(item, index)">
				</image>
			</view>
		</view>
		<view class="footer">
			<!-- 	<view class="block">
				<van-icon size="50rpx" name="thumb-circle-o" />
				{{props.likeNum}}
			</view> -->
			<view class="block" v-if="!props.ifDetail&&props.type!=='公告'">
				<van-icon size="50rpx" name="comment-circle-o" />
				{{ props.commentNums }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		inject,
		getCurrentInstance,
		watch
	} from "vue";

	import Tag from "@/components/Tag.vue";
	import {
		postUpdatePostStatu,
		deletePost
	} from '@/apis/apis.js'
	const props = defineProps({
		title: {
			type: String,
			default: "",
		},
		type: {
			type: String,
			default: "",
		},
		content: {
			type: String,
			default: "-",
		},
		id: {
			type: Number,
			default: -1,
		},
		statu: {
			type: Number,
			default: 0,
		},
		date: {
			type: String,
			default: "-",
		},
		avatarUrl: {
			type: String,
			default: "",
		},
		username: {
			type: String,
			default: "-",
		},
		likeNum: {
			type: Number,
			default: 0,
		},
		commentNums: {
			type: Number,
			default: 0,
		},
		ifDetail: {
			type: Boolean,
			default: false,
		},
		ifMine: {
			type: Boolean,
			default: false,
		},
		ifAudit: {
			type: Boolean,
			default: false,
		},
		ifTeacher: {
			type: Boolean,
			default: false
		},
		imgUrls: {
			type: Array,
			default: []
		},
		clubName: {
			type: String,
			default: ""
		}
	});
	//----------------------------微信小程序获取dom元素------------------------
	const instance = getCurrentInstance();
	const contentDomHeight = ref()
	const rpx = inject('globalData').rpx
	const needShowMore = ref(false)
	const query = uni.createSelectorQuery().in(instance.proxy);
	query
		.select(".conText")
		.boundingClientRect((data) => {
			contentDomHeight.value = data.height / rpx //单位rpx,大于140视为需展开
			if (contentDomHeight.value > 140)
				needShowMore.value = true
		}).exec();
	const isShowALL = ref(false)
	const handleShowALL = () => {
		isShowALL.value = !isShowALL.value
	}
	//--------
	const globalData = inject('globalData')
	const handleDelete = () => {
		uni.showModal({
			content: "删除此帖?",
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: "加载中",
					});
					console.log(props.id, 'xx');
					deletePost({
						id: props.id
					}).then((res) => {
						console.log(res)
						if (res.status === 200) {
							globalData.needRefresh = true
							uni.showToast({
								title: '已删除',
								icon: 'none'
							})
						}
					})
					setTimeout(() => {
						 if (props.imgUrls.length) { //在详情页面
						uni.navigateBack();
						}
						changeTypeCenter({
							detail: {
								index: 0
							}
						})
						uni.hideLoading();
					}, 500);
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	}
	//----------
	const toDetail = (id) => {
		const temp = JSON.stringify(props);
		console.log(temp, JSON.parse(temp), '123')
		if (!props.ifDetail) {
			uni.navigateTo({
				url: `/pages/postDetail/postDetail?id=${id}&props=${encodeURIComponent(temp)}`,
			});
		}
	};
	const previewImage = (url, index) => {
		console.log("photoImg", url);
		let imgsArray = props.imgUrls;
		uni.previewImage({
			current: index,
			urls: imgsArray,
		});
	};
	const changeTypeCenter = inject('changeTypeCenter', () => {})
	const typeData = inject('typeData', ref(0))
	// 
	const accessPost = () => {
		uni.showModal({
			content: props.type === '社团活动' && props.statu === 0 ? "审核已通过,将由管理员进行最终审核" : "确认通过该条帖子的审核吗?",
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: "加载中",
					});
					console.log(props.id, 'xx');
					let newStatus = 1;  // 默认通过状态
					if (props.type === '社团活动' && props.statu === 0) {
						newStatus = 3;  // 教师通过，等待管理员审核
					}
					postUpdatePostStatu({
						id: props.id,
						statu: newStatus
					}).then((res) => {
						console.log(res)
						if (res.status === 200) {
							uni.showToast({
								title: newStatus === 3 ? '已提交给管理员审核' : '已通过',
								icon: 'none'
							})
						}
					})
					setTimeout(() => {
						if (props.imgUrls.length) { //在详情页面
							uni.navigateBack();
						}
						changeTypeCenter({
							detail: {
								index: typeData.value
							}
						})
						uni.hideLoading();
					}, 500);
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	};
	const disagreePost = () => {
		uni.showModal({
			content: "确认不通过该条帖子的审核吗",
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: "加载中",
					});
					console.log(props.id, 'xx');
					postUpdatePostStatu({
						id: props.id,
						statu: 2
					}).then((res) => {
						console.log(res)
						if (res.status === 200) {
							uni.showToast({
								title: '已完成',
								icon: 'none'
							})
						}
					})
					setTimeout(() => {
						if (props.imgUrls.length) { //在详情页面
							uni.navigateBack();
						}
						changeTypeCenter({
							detail: {
								index: typeData.value
							}
						})
						uni.hideLoading();
					}, 500);
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	}
</script>

<style lang="less" scoped>
	.postItem {
		// height: 400rpx;
		height: auto;
		width: 750rpx;
		// padding: 15rpx;
		background-color: white;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		overflow: hidden;
		box-sizing: border-box;
		// box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
		// box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.3);
		border: 5rpx solid #e8eaf0;
		position: relative;

		// .tagCon {
		// 	position: absolute;
		// 	top: 10rpx;
		// 	left: 0;
		// }

		.waterMark {
			height: 300rpx;
			width: 300rpx;
			opacity: 0.3;
			position: absolute;
			right: -60rpx;
			bottom: 0;
			z-index: 2;
		}

		.header {
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 35rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			gap: 15rpx;
			position: relative;
			font-size: 34rpx;
			z-index: 3;

			&:before {
				content: "";
				position: absolute;
				width: 90%;
				height: 4rpx;
				background-color: #f8f8f8;
				z-index: 0;
				bottom: -15rpx;
				left: 5%;
				opacity: 0.4;
			}

			.avater {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
			}

			.audit {
				position: absolute;
				right: 40rpx;
				top: 20rpx;
				display: inline-flex;
				gap: 20rpx;
				opacity: 1;

				.btn {
					height: 60rpx;
					width: 60rpx;
					border: 2rpx solid beige;
					border-radius: 100%;
					background-color: aqua;
					display: flex;
					justify-content: center;
					align-items: center;

					&.access {
						border: 1rpx #aedf96 solid;
						background-color: #f0f9eb;
					}

					&.disagree {
						border: 1rpx #fab6b6 solid;
						background-color: #fef0f0;
					}
				}
			}
		}

		.body {
			// height: 220rpx;
			// height: auto;
			min-height: 20rpx;
			// ?
			// max-height: 500rpx;
			width: 100%;
			padding: 40rpx;
			padding-top: 15rpx;
			padding-bottom: 20rpx;
			line-height: 55rpx;
			box-sizing: border-box;


			.bodyContextIn {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
			}

			.conText {
				display: block;
				margin: 0;
				padding: 0;
				font-size: 30rpx;
				line-height: 45rpx;
				overflow: hidden;
			}

			.content {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				text-overflow: ellipsis;
				font-size: 30rpx;
				line-height: 45rpx;
				margin: 0;
				padding: 0;
				height: 135rpx !important;


			}


			.bthShowMore {
				min-width: 170rpx;
				background-color: rgba(0, 0, 0, 0);
				// height: 50rpx;
				padding: 12rpx;
				padding-top: 2rpx;
				padding-bottom: 2rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				border: 2rpx gray dashed;
				font-size: 28rpx;
				margin-top: 15rpx;
				margin-left: 20rpx;
				z-index: 2000;
			}

			.imgsCon {
				display: flex;
				margin-top: 40rpx;
				width: 90%;
				gap: 20rpx;
				flex-wrap: wrap;
				margin: 20rpx auto;

				.imgItem {
					z-index: 3;
					height: 180rpx;
					width: 180rpx;
					background-color: #e8eaf0;

					border-radius: 20rpx;
					overflow: hidden;
				}
			}
		}

		.footer {
			height: 90rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			// justify-content: flex-end;
			padding-bottom: 10rpx;

			.block {
				height: 100%;
				width: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
			}
		}
	}
	.userName {
		display: flex;
		align-items: center;
		
		.clubName {
			color: #666;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
</style>